<template>
 <div class="app-container">
   <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
     <el-form-item label="设备号" prop="name">
       <el-input
         v-model="queryParams.IMEI"
         placeholder="请输入设备号"
         clearable
         @keyup.enter.native="handleQuery"
       />
     </el-form-item>
     <el-form-item label="设备状态" prop="equipmentType">
       <el-select v-model="queryParams.status" placeholder="请选择设备状态" clearable>
         <el-option
           v-for="dict in dict.type.link_type"
           :key="dict.value"
           :label="dict.label"
           :value="dict.value"
         />
       </el-select>
     </el-form-item>
     <el-form-item>
       <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
       <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
     </el-form-item>
   </el-form>
   <div class="a1" v-for="(item,index) in flatsList" :key="index" >
     <div class="row1">
       <img :src="icon" class="icon">
<!--           <el-col class="el-row" :span="5">-->
<!--             <span class="imei">{{item.imei}}</span>-->
<!--           </el-col>-->
       <div class="status" :style="{background:(item.status == '设备正常'?'rgb(6, 175, 87)':'')}">{{item.status}}</div>
       <span class="imeis">设备号：{{item.imei}}</span>
       <el-button class="particulars" type="text" v-model="item.imei" @click="test(item.imei)">
         设备详情
       </el-button>
       <el-dialog title="详情" :visible.sync="dialogVisible" width="90%">
           <div class="pop" >
             <el-row>
               <el-col class="equipment">
                 <span class="eq">设备信息</span>
               </el-col>
               <el-col class="details">
                 <el-row>
                   <el-col class="row2" :span="12">
                     <span class="area">所属区域：</span>
                     {{ Object.assign({},detailsList[0]).address}}
                   </el-col>
                   <el-col class="row2" :span="12">
                     <span class="area">设备地址：</span>
                     {{ Object.assign({},detailsList[0]).region}}
                   </el-col>
                 </el-row>
                 <el-row>
                   <el-col class="row2" :span="12">
                     <span class="area">设备名称：</span>
                     {{ Object.assign({},detailsList[0]).name}}
                   </el-col>
                   <el-col class="row2" :span="12">
                     <span class="area">在线状态：</span>
                     {{ Object.assign({},detailsList[0]).status == 1 ? "设备正常" : "未连接" }}
                   </el-col>
                 </el-row>
                 <el-row>
                   <el-col class="row2" :span="12">
                     <span class="area">设备SN号：</span>
                     {{ Object.assign({},detailsList[0]).snNum}}
                   </el-col>
                   <el-col class="row2" :span="12">
                     <span class="area">经纬度：</span>
                     {{ Object.assign({},detailsList[0]).lat}}
                     ,
                     {{ Object.assign({},detailsList[0]).lng}}
                   </el-col>
                 </el-row>
               </el-col>
             </el-row>
           </div>
           <br>
           <div class="plat">
             <el-row style="display: flex; justify-content: space-between; width: 100%;">
               <!-- 地图-->
               <el-col class="plats">
                 <el-row>
                   <el-col class="plat1">
                     <span class="eq">设备地图</span>
                   </el-col>
                   <el-col class="plat2">
                     <map-component class="map1" :lat-anglng="latAndLng"></map-component>
                   </el-col>
                 </el-row>
               </el-col>
               <!-- 图片-->
               <el-col class="print">
                 <el-col class="plat1">
                   <span class="eq">设备图片</span>
                 </el-col>
                 <el-col class="plat2">
                   <div class="block">
                     <el-image class="picture" :src="Object.assign({},detailsList[0]).picture"></el-image>
                   </div>
                 </el-col>
               </el-col>
             </el-row>
           </div>
         </el-dialog>
     </div>

      <el-row>
        <el-col class="row" :span="12">
          <el-row>
            <el-col class="rows" :span="8">
              <el-row>
                <el-col class="maps" :span="8">
                  <img :src="map" alt="" class="map">
                </el-col>
                <el-col class="maps" :span="16">
                  <span class="snr">信噪比</span>
                </el-col>
              </el-row>
            </el-col>
            <el-col class="rows" :span="8">
              <span class="snrs"> {{item.snr}}</span>
            </el-col>

            <el-col class="rows" :span="8">
                <button  class="history" to="statistics" v-model="item.imei" @click="Liststatistics(item.imei,'snr','1')">历史数据>></button >
            </el-col>
          </el-row>
        </el-col>

        <el-col class="row" :span="12">
          <el-row>
            <el-col class="rows" :span="8">
              <el-row>
                <el-col class="maps" :span="8">
                  <img :src="rssi" alt="" class="map">
                </el-col>
                <el-col class="maps" :span="16">
                  <span class="snr">信号强度</span>
                </el-col>
              </el-row>
            </el-col>

            <el-col class="rows" :span="8">
              <span class="snrs">{{item.rsrp}}</span>
            </el-col>

            <el-col class="rows" :span="8">
              <button  class="history" to="statistics" v-model="item.imei" @click="Liststatistics(item.imei,'rsrp','2')">历史数据>></button >
            </el-col>
          </el-row>
        </el-col>
      </el-row>
     <el-row>
       <el-col class="row" :span="12">
         <el-row>
           <el-col class="rows" :span="8">
             <el-row>
               <el-col class="maps" :span="8">
                 <img :src="battery" alt="" class="battery">
               </el-col>
               <el-col class="maps" :span="16">
                 <span class="snr">电池电压</span>
               </el-col>
             </el-row>
           </el-col>

           <el-col class="rows" :span="8">
             <span class="snrs">{{item.battery}}</span>
           </el-col>

           <el-col class="rows" :span="8">
             <button  class="history" to="statistics" v-model="item.imei" @click="Liststatistics(item.imei,'battery','3')">历史数据>></button >
           </el-col>
         </el-row>
       </el-col>
       <el-col class="row" :span="12">
         <el-row>
           <el-col class="rows" :span="8">
             <el-row>
               <el-col class="maps" :span="8">
                 <img :src="zaxis" alt="" class="map">
               </el-col>
               <el-col class="maps" :span="16">
                 <span class="snr">倾斜角度</span>
               </el-col>
             </el-row>
           </el-col>

           <el-col class="rows" :span="8">
             <span class="snrs">{{item.zaxis}}</span>
           </el-col>

           <el-col class="rows" :span="8">
             <button  class="history" to="statistics" v-model="item.imei" @click="Liststatistics(item.imei,'tilt','4')">历史数据>></button >
           </el-col>
         </el-row>
       </el-col>
     </el-row>

     <el-row>
       <el-col class="row" v-if="item.waterlevel" :span="12">
         <el-row>
           <el-col class="rows" :span="8">
             <el-row>
               <el-col class="maps" :span="8">
                 <img :src="waterlevel" alt="" class="map">
               </el-col>
               <el-col class="maps" :span="16">
                 <span class="snr">水浸状态</span>
               </el-col>
             </el-row>
           </el-col>

           <el-col class="rows" :span="8">
             <span class="snrs"> {{item.waterlevel}}</span>
           </el-col>

           <el-col class="rows" :span="8">
             <button  class="history" to="statistics" v-model="item.imei" @click="Liststatistics(item.imei,'water','5')">历史数据>></button >
           </el-col>

         </el-row>
       </el-col>
       <el-col class="row" :span="12"></el-col>
     </el-row>
   </div>
<!--   </el-form>-->
 </div>
</template>

<script>
import {listFlats, listImei, listParticulars} from "@/api/system/monitoring";
import MapComponent from '../../components/MapComponent.vue';
import item from "@/layout/components/Sidebar/Item.vue";

export default {
  components:{
    'map-component': MapComponent
  },
  dicts: ['link_type'],
  data() {
    return {
      input: '',
      // 遮罩层
      loading: true,
      icon:require('@/layout/img/icon-server.svg'),
      map: require('@/layout/img/xinzaobi.svg'),
      waterlevel:require('@/layout/img/shuijin.png'),
      battery:require('@/layout/img/dianya.png'),
      zaxis:require('@/layout/img/jiaodu.png'),
      rssi:require('@/layout/img/xinhao.png'),

      // statistics:require('@/views/system/monitoring/statistics.vue'),

      // 设备管理数据
      flatsList: [],
      implist:[],
      latAndLng:{lat:1,lng:1},
      // 查询参数
      queryParams: {
        IMEI:null,
        status:null
      },
      queryPop:{
        address:null
      },
      //设备详情
      detailsList: {},
      dialogVisible: false,
      // 显示搜索条件
      showSearch: true,

    }
  } ,
  created() {
    this.getList();
    this.listImei();
  },

  methods: {
    /** 查询设备监控表*/
    getList() {
      this.loading = true;
      listFlats(this.queryParams).then(response => {
        this.flatsList = response.rows;
        console.log(321,response)
        this.loading = false;
      });
    },
    test(item){
      console.log(item)
      //设置弹窗
      this.dialogVisible =true
      listParticulars(item).then(response => {
        this.detailsList = response?.rows;
        console.log(this.detailsList)
        this.latAndLng.lat = Object.assign({},this.detailsList[0]).lat;
        this.latAndLng.lng = Object.assign({},this.detailsList[0]).lng;
        console.log("lat",this.latAndLng.lat)
        this.loading = false;
      })
    },
    Liststatistics(item,str,index){
      console.log(item)
      var imei =item
      console.log(imei)
      this.$router.push({path:'/statistics',query:{imei,str,index}})
    },
    listImei() {
      // this.loading = true;
      // listImei(this.queryParams).then(response => {
      //   this.implist = response.rows;
      //   console.log(999,response)
      //   this.loading = false;
      // });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },

}
</script>

<style>
.a1{
  border: 1px solid #d2d6de;
  border-radius: 3px;
  padding: 0 11px;
  margin-bottom: 20px;
  min-height: 300px;
  font-size: 14px;
}
.row1{
  border-bottom: 1px solid #d9d9d9;
  overflow: hidden;
  line-height: 45px;
  min-height: 40px;
}
.row{
  min-height: 80px;
}
.rows{
  min-height: 80px;
}
.maps{
  min-height: 80px;
}
.IMEI{
  width: 200px;
}
.icon{
  width: 20px;
  height: 20px;
  vertical-align: -0.5em;
  fill: currentColor;
  overflow: hidden;
}
.map{
  margin: 20px 0px 10px 10px;
  width:40px;
  height: 40px;
}
.snr{
  display: inline-block;
  margin-top: 20px;
}
.history{
  margin-top: 30px;
  border-color: transparent;
  color: #1890ff;
  background: transparent
}
.battery{
  width: 63px;
  height: 70px;
}
.snrs{
  font-size:27px !important;
  color: #1a9bec;
  display: inline-block;
  margin-top: 30px;
}
.imei{
  display: inline-block;
  margin: 10px 0px 0px 10px;
}
.el-row{
  /*border: 1px solid coral;*/
  min-height: 40px;
}
.status{
  display: inline-block;
  vertical-align: middle;
  background: #f44336;
  padding: 2px 6px;
  color: #fff;
  border-radius: 4px;
  line-height: 15px;
  margin-left: 20px;
  cursor: pointer
}
.particulars{
  float: right;
  border-color: transparent;
  color: #1890ff;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  line-height: 23px;
  margin-right: 20px;
}
.imeis{
  display: inline-block;
  float: right;
}
.pop{
  border: 1px solid #b4bccc;
  min-height: 200px;
}
.equipment{
  border: 1px solid #b4bccc;
  min-height: 40px;
}
.eq{
  font-size:20px !important;
  color: black;
  display: inline-block;
  margin: 5px 0px 0px 20px;
  font-weight: 900
}
.details{
  border: 1px solid #b4bccc;
  min-height: 160px;
}
.row2{
  min-height: 50px;
}
.area{
  display: inline-block;
  margin: 15px 0px 0px 15px;
  font-weight: 800;
  color: black;
}
.plat{
  /*border: 1px solid #b4bccc;*/
  min-height: 400px;
}
.plats{
  border: 1px solid #b4bccc;
  min-height: 400px;
  width: 49%;
}
.print{
  border: 1px solid #b4bccc;
  min-height: 400px;
  width: 49%;
  margin-left: 25px;
}
.plat1{
  border: 1px solid #b4bccc;
  min-height: 40px;
}
.plat2{
  border: 1px solid #b4bccc;
  min-height: 200px;
}
.picture{
  display: inline-block;
  height: 355px;
  width: 100%;
}
.block{
  min-height: 360px;
}
.map1{
  display: inline-block;
  width: 100%;
  height: 360px;
}

</style>
